<template>
  <div>
    <h2>ChildComp...</h2>
    <!-- 使用props数据 -->
    <p>{{ num }}</p>
    <!-- 需求：更新num数据 -->
    <button @click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  // 除了App组件以外，其他组件名称必须是多个单词组成
  // 为什么组件名称必须是多个单词组成？
  // WebComponent浏览器组件化，内置了一些基本组件，而这些组件名称全部是单个单词
  // 我们组件多个单词可以防止和浏览器内置组件命名冲突
  name: "ChildComp",
  // 声明接受props数据
  // 一旦声明接受数据，props数据会经过数据代理挂载到this上
  // props: ["num"], // 声明接受数据
  // props: {
  //   num: Number, // 声明接受数据和数据类型
  // },
  props: {
    // 声明接受数据、数据类型和必要的
    num: {
      type: Number,
      required: true, // 必要
      // default: 11, // 默认值
      // validator(val) {
      //   // 自定义校验函数
      //   return val >= 18 && val <= 60;
      // },
    },
    update: {
      type: Function,
      required: true,
    },
  },
  methods: {
    handleClick() {
      // num是props数据
      // props数据特点：只读，不能直接修改
      // this.num++;
      // 怎么办？父组件定义更新数据的函数，将函数传递给子组件，子组件调用函数就可以更新了～
      // 这就是子组件修改父组件数据的方式
      this.update();
    },
  },
};
</script>